<template #indicator="{ active: number, total: number }">
  <div>
    <div class="xiang">
      <router-link to="/home"
        ><van-icon name="arrow-left" class="back"
      /></router-link>
      <!-- <van-swipe @change="onChange" class="van">
        <van-swipe-item>
          <img :src="this.newnumss[0].img" alt="" />
        </van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
        <template #indicator
          >/
          <div class="custom-indicator">{{ 1 }}4</div>
        </template>
      </van-swipe> -->
      <div class="van">
        <img :src="this.newnumss[0].ingbn" alt="" />
      </div>
      <p class="t1">{{ this.newnumss[0].title }}</p>
      <p class="t2">{{ this.newnumss[0].miaoshu }}</p>
      <p class="price">￥{{ this.newnumss[0].price }}</p>
      <p class="t3">
        <span class="s1">规格:</span>
        <span class="s2"></span>
      </p>
      <p class="t4">
        <span class="s1">配送至:</span>
        <span class="s2">请选择配送范围<i class="s3">必选</i></span>
      </p>
      <!-- <h2>猜你喜欢</h2> -->
      <!-- <div class="lii">
        <List :pics="newpics"/>
      </div> -->
      <div class="bottom">
        <span class="iconfont icon-gouwuche"></span>
        
        <button @click="shopfun(shopid)">加入购物车</button>
      </div>
    </div>
  </div>
</template>


<script>
// import List from "../components/goodslist.vue";
export default {
  data() {
    return {
      newnumss: "",
    };
  },
  created() {
    console.log("我是vuex里面的支", this.$store.state.homem.newsxs.sxpic);
  },
  mounted() {
    console.log("我是传过来的id", this.$route.params.id);
    this.newnumss = this.$store.state.homem.newsxs.sxpic.filter((v) => {
      if (v.id == this.$route.params.id) {
        return v;
      }
    });
    console.log("这是筛选后的数据", this.newnumss);
    this.$store.commit("upsxxxx", this.newnumss);
  
  },
  components: {
    // List,
  },
  computed: {
    newnum() {
      return this.$store.state.homem.newsxs;
    },
    n() {
      return this.$store.state.homem.newsxxxx;
    },
    shopid(){
      return this.$store.state.homem.newsxxxx[0].id
    },
     newpics() {
      return this.$store.state.listm.newpic;
    },
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    shopfun(ids) {
      this.$router.push({ name: "shop", params: { id: ids } });
    },
  },
};
</script>

<style scoped>
@import url(../assets/life/iconfont.css);
.back {
  position: fixed;
  top: 0.1rem;
  left: 0.1rem;
  font-size: 0.25rem;
  z-index: 100;
  background-color: rgb(247, 230, 233);
  border-radius: 50%;
  padding: 0.04rem;
}
.xiang {
  width: 100%;
  min-height: 10rem;
  background-color: #fff;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.van {
  width: 100%;
  height: 3.75rem;
}
.van img {
  width: 100%;
  height: 100%;
}
.t1 {
  font-size: 15px;
  margin: 0.15rem 0;
  margin-left: 0.2rem;
}
.t2 {
  font-size: 0.13rem;
  color: #797d82;
  margin-left: 0.2rem;
  /* margin: 0.15rem 0; */
}
.price {
  font-size: 0.2rem;
  color: #c03131;
  margin: 0.2rem 0;
  margin-left: 0.2rem;
}

.t3,
.t4 {
  height: 0.4rem;
  border-top: 0.01rem solid #dbdcdd;
  line-height: 0.4rem;
}
.t3 .s1 {
  font-size: 0.13rem;
  color: #797d82;
  margin-left: 0.2rem;
}
.t3 .s2 {
  font-size: 0.13rem;
  color: #000;
  margin-left: 0.15rem;
}
.t4 .s1 {
  font-size: 0.13rem;
  color: #797d82;
  margin-left: 0.2rem;
}
.t4 .s2 {
  font-size: 0.13rem;
  color: #797d82;
  margin-left: 0.15rem;
}
.t4 .s3 {
  font-size: 0.13rem;
  color: #c03131;
  font-style: normal;
}
h2 {
  font-weight: 700;
  margin: 0.15rem 0;
  margin-left: 0.2rem;
}
.lii {
  width: 100%;
  height: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bottom {
  width: 100%;
  height: 0.65rem;
  position: fixed;
  bottom: 0rem;
  display: flex;
  align-items: center;
  border-top: 1px solid #ededed;
  background-color: #fff;
}
.bottom p {
  /* color: #797d82; */
  font-size: 0.19rem;
  position: absolute;
  left: 1.3rem;
}
.bottom span {
  /* color: #797d82; */
  font-size: 0.3rem;
  position: absolute;
  left: 0.18rem;
}
.bottom button {
  width: 1.05rem;
  height: 100%;
  background-color: #c03131;
  color: #fff;
  border: 0;
  outline: none;
  position: absolute;
  right: 0;
}
</style>